实现Vue非父子组件通信方式：
1、利用$attrs实现祖孙组件间的数据传递，$listeners实现祖孙组件间的事件监听 $attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 $listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
2、利用provide/inject 实现祖孙组件间的数据传递和事件监听 provide 和 inject 主要为高阶插件/组件库提供用例，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
3、利用vuex传递存储数据，利用$parent、$children封装一套可向下广播事件，向上派发事件的方法;
**第一种实现方式**
```html
<style>
.mask-bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
.alert {
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 200px;
border-radius: 10px;
text-align: center;
background-color: #fff;
transform: translate(-50%, -50%);
}
</style>
<div class="demo-block">
<div>
<div @click="isShow = true" style="margin-bottom: 20px">显示弹层(第一种方式)</div>
<my-mask :show="isShow" :title="title" :con="con" @on-submit="submit"></my-mask><br>
</div>
</div>// 弹层组件(子组件的子组件)
var alert = {
template: ` <div class="alert">
<h2>{{title}}</h2>
<div class="alert-con">
{{con}}
</div>
<button class="submit" @click="submit">确定</button>
</div>`,
data() {
return {
}
},
props: ['title', 'con'],
methods: {
submit() {
this.$emit('on-submit')
}
}
};
// mask组件(子组件)
var myMask = {
template: `<div class="mask" v-if="show">
<div class="mask-bg"></div>
<alert v-bind="$attrs" v-on="$listeners"></alert>
</div>`,
components: {
alert
},
inheritAttrs: false,
data() {
return {
}
},
props: ['show'],
methods: {
},
watch: {
}
};
export default {
name: 'my-page',
components: {
myMask,
},
data() {
return {}
},
isShow: false,
title: '我是标题',
con: '我是内容',
};
},
methods: {
submit() {
window.alert('关闭弹层');
this.isShow = false;
},
}
}祖组件在传递数据给子组件的时候，如果子组件没有通过props接收祖组件传递的参数，那么这个数据会表现在子组件的根标签的属性上;通过设置 inheritAttrs 到 false，这些默认行为将会被去掉; 然后我们可以在子组件绑定v-bind="attrs",将这些特性传递给孙组件，孙组件通过props接收数据; 同理我们也可以通过listeners实现祖孙之间的事件监听器传递
第二种实现方式
<style>
.tab-list {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.tab-item {
display: inline-block;
width: 100px;
text-align: center;
border-right: 1px solid #ccc;
}
.tab-item.active {
color: red;
}
</style>
<div class="demo-block">
<div>
<div @click="changeCon()" style="margin-bottom: 20px">切换显示内容(第二种方式)</div>
<my-con></my-con><br>
</div>
</div>var myTable = {
template: `<div>
<div class="tab-list">
<span class="tab-item" v-for="(item, index) in list" @click="switchType(item.type)" :class="{'active': item.type === store.state.type}">{{item.value}}</span>
</div>
</div>`,
data() {
return {
tableType: 0,
list: [{value: '新闻', type: 0}, {value: '汽车', type: 1}, {value: '娱乐', type: 2}]
}
},
inject: ['store'],
methods: {
switchType(value) {
this.store.commit('type', value)
}
}
};
var myList = {
template: `<div>
<div v-for="(item, index) in listInfo[store.state.type]">{{item}}</div>
</div>`,
data() {
return {
listType: 0,
listInfo: {
0: ['新闻1', '新闻2', '新闻3'],
1: ['汽车1', '汽车2', '汽车3'],
2: ['娱乐1', '娱乐2', '娱乐3']
}
}
},
inject: ['store'],
props: [],
methods: {
},
mounted() {
}
};
var myCon = {
template: `<div>
<my-table></my-table>
<my-list></my-list>
</div>`,
data() {
return {
}
},
components: {
myTable,
myList,
mySearch
},
props: [],
methods: {
},
mounted() {
}
};
export default {
name: 'my-page',
components: {
myCon,
},
provide() {
return {
store: this.store
}
},
data() {
return {
store: {
state: {
type: 0
},
commit (type, value) {
this.state[type] = value
}
},
};
},
methods: {
changeCon() {
this.store.state.type ++;
if(this.store.state.type > 2) this.store.state.type = 0;
},
},
mounted() {
}
}第三种实现方式(来自饿了么UI之前源码)
<div class="demo-block">
<div>
<input type="text" placeholder="搜索(第三种方式)" class="input" @input="changInput"><span v-if="!hasSearch" style="display:inline-block; margin-bottom: 20px">请输入内容</span>
<my-con></my-con><br>
</div>
</div>var myCon = {
template: `<div>
<my-table></my-table>
<my-list></my-list>
<my-search></my-search>
</div>`,
data() {
return {
}
},
components: {
myTable,
myList,
mySearch
},
props: [],
methods: {
},
mounted() {
}
};
var mySearch = {
name: 'mySearch',
template: `<div>
<p style="margin: 20px auto">{{content}}</p>
</div>`,
data() {
return {
content: '没有搜索内容'
}
},
props: [],
methods: {
/*对多级父组件进行事件派发*/
dispatch(componentName, eventName, params) {
/*获取父组件，如果以及是根组件，则是$root*/
var parent = this.$parent || this.$root;
/*获取父节点的组件名*/
var name = parent.$options.name;
while (parent && (!name || name !== componentName)) {
/*当父组件不是所需组件时继续向上寻找*/
parent = parent.$parent;
if (parent) {
name = parent.$options.name;
}
}
/*找到所需组件后调用$emit触发当前事件*/
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
},
},
mounted() {
this.$on('on-input', (value) => {
this.content = value;
if(value == '') {
this.content = '没有搜索内容';
this.dispatch('my-page', 'no-data', false);
}
})
}
};
function broadcast(componentName, eventName, params) {
/*遍历当前节点下的所有子组件*/
this.$children.forEach(child => {
/*获取子组件名称*/
var name = child.$options.name;
if (name === componentName) {
/*如果是我们需要广播到的子组件的时候调用$emit触发所需事件，在子组件中用$on监听*/
child.$emit.apply(child, [eventName].concat(params));
} else {
/*非所需子组件则递归遍历深层次子组件*/
broadcast.apply(child, [componentName, eventName].concat([params]));
}
});
}
export default {
name: 'my-page',
components: {
myMask,
myCon,
},
provide() {
return {
store: this.store
}
},
data() {
return {
store: {
state: {
type: 0
},
commit (type, value) {
this.state[type] = value
}
},
isShow: false,
title: '我是标题',
con: '我是内容',
hasSearch: false
};
},
methods: {
submit() {
window.alert('关闭弹层');
this.isShow = false;
},
changeCon() {
this.store.state.type ++;
if(this.store.state.type > 2) this.store.state.type = 0;
},
changInput(e) {
if(e.target.value) {
this.hasSearch = true;
}
this.broadcast('mySearch', 'on-input', e.target.value)
},
/*对多级父组件进行事件派发*/
dispatch(componentName, eventName, params) {
/*获取父组件，如果以及是根组件，则是$root*/
var parent = this.$parent || this.$root;
/*获取父节点的组件名*/
var name = parent.$options.name;
while (parent && (!name || name !== componentName)) {
/*当父组件不是所需组件时继续向上寻找*/
parent = parent.$parent;
if (parent) {
name = parent.$options.name;
}
}
/*找到所需组件后调用$emit触发当前事件*/
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
},
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
},
mounted() {
this.$on('no-data', (value) => {
this.hasSearch = value;
})
}
}broadcast通过递归遍历子组件找到所需组件广播事件，而dispatch则逐级向上查找对应父组件派发事件。 broadcast(componentName:(组件名），eventName:(事件名称)以及params:(数据))。根据componentName深度遍历子组件找到对应组件emit事件eventName。 dispatch(componentName:(组件名），eventName:(事件名称)以及params:(数据))。根据componentName向上级一直寻找对应父组件，找到以后emit事件eventName。 通过这种方式进行数据、事件传递，必须给组件命名name;